<script setup>
defineProps({
  item: {
    type: Object,
    required: true
  }
});
</script>

<template>
  <div class="goods-item">
    <div class="goods-image-container">
      <img :src="'/api' + item.cover" :alt="item.name" class="goods-image">
    </div>
    <div class="goods-info">
      <h3 class="goods-name">{{ item.name }}</h3>
      <div class="goods-tags" v-if="item.tags && item.tags.length">
        <el-tag 
          v-for="tag in item.tags" 
          :key="tag.id" 
          size="small" 
          type="info" 
          effect="plain"
          class="goods-tag"
        >
          {{ tag.name }}
        </el-tag>
        <el-tag size="small" type="primary" v-if="item.category">{{ item.category.name }}</el-tag>
      </div>
    </div>
  </div>
</template>

<style scoped>
.goods-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.goods-image-container {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

.goods-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.goods-item:hover .goods-image {
  transform: scale(1.05);
}

.goods-info {
  padding: 12px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.goods-name {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  min-height: 2.6em; /* 保证高度一致 */
}

.goods-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}

.goods-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .goods-image-container {
    aspect-ratio: 3/2;
  }
  
  .goods-name {
    font-size: 14px;
  }
}
</style>